<template>
    <div class="component component--layout">
        <header class="header header--secondary">
            <p class="paragraph">
                {{ props.title }}
            </p>
        </header>
        <div class="column column--primary">
            <div class="element element--article">
                <figure class="article__figure">
                    <a class="figure__image">
                        <img class="lazyautosizes" sizes="620px" :src="props.bigImgTitle.img">
                    </a>
                </figure>
                <div class="article__content">
                    <h3 class="article__headline">
                        <a class="link">
                            {{ props.bigImgTitle.title }}
                        </a>
                    </h3>
                    <div class="content--secondary">
                        <div class="group group--tickers">
                            <a class="ticker qt-chip neutral">
                                <span class="ticker__symbol">{{ props.bigImgTitle.symbol }}</span>
                                <bg-quote class="ticker__change negative"><span class="neutral">4.327</span></bg-quote>
                                <i class="icon"></i>
                            </a>
                            <template v-for="(v, i) in props.bigImgTitle.data" :key="i">
                                <bg-quote :class="[value < 0 ? 'negative' : 'positive']">
                                    <router-link to="" class="ticker">
                                        <span class="ticker__symbol">{{ v.name }}</span>
                                        <bg-quote :class="[value < 0 ? 'negative' : 'positive']">{{ v.value
                                            }}%</bg-quote>
                                        <i :class="[value < 0 ? 'negative' : 'positive', 'icon']"></i>
                                    </router-link>
                                </bg-quote>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column column--aside">
            <div class="element element--article">
                <figure class="article__figure">
                    <a class="figure__image">
                        <img class="lazyautosizes lazyloaded" sizes="300px" :srcset="props.topRightSmall.src">
                    </a>
                </figure>
                <div class="article__content">
                    <p class="fontS">{{ props.topRightSmall.title }}</p>
                </div>
            </div>
            <div class="group group--articles">
                <div class="element element--article" v-for="(v, i) in props.topRightSmall.dataText" :key="v.id">
                    <div class="article__content">
                        <h3 class="artline">
                            <a class="link">
                                {{ v.cont }}
                            </a>
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['title', 'bigImgTitle', 'topRightSmall'])
</script>
<style scoped lang='scss'>
.element--article {
    display: block;

    .article__headline {
        font: 800 1.75rem / 1.25 Mulish, sans-serif;
        display: block;
        padding: 10px 0 0;
        letter-spacing: -.025em;
    }
}

.component--layout {
    .column--primary {
        max-width: 640px;
    }

    .column--aside {
        max-width: 320px;

        .fontS {
            font-size: 18px;
            margin: 10px 0 0 0;
            font-weight: bold;
        }
    }

    .group--articles {
        .element--article:nth-of-type(n) {
            box-shadow: 0 -1px 0 0 #e1e1e1, inset 0 -1px 0 0 #e1e1e1;
            margin: 0;
            padding: 10px 0;

            .article__content {
                margin: 0;
            }
        }

        .artline {
            font-size: 14px;
            font-weight: 700;
            color: #262626;
        }
    }
}
</style>